<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
	<title>Home</title>
	<script type="text/javascript" src="resources/knockout-3.0.0.js"></script>
	<script type="text/javascript" src="resources/jquery-2.0.3.js"></script>
</head>
<body>
<h1>
	Hello world!  
</h1>

<P>  The time on the server is ${serverTime}. </P>
<form id="joinChatForm" action="/goodwilldd/mvc/chat">
	<input type="text" id="topic" name="topic" data-bind="value: topic"/>
	<input type="text" id="userName" name="userName" data-bind="value: userName"/>
	<button data-bind="click: joinChat">체팅 참여</button>
	<input type="text" id="text" name="text" data-bind="value:message"/>
	<button data-bind="click:postMessage">메시지 전송</button>
</form>
<div id="chatContent" style="border:1px solid;" data-bind="html: chatContent"></div>
<script type="text/javascript">
function ChatViewModel() {
	 
	var that = this;
 
	that.topic = ko.observable('');
	that.userName = ko.observable('');
	that.chatContent = ko.observable('');
	that.message = ko.observable('');
	that.activePollingXhr = ko.observable(null);
 
	var keepPolling = false;
 
	that.joinChat = function() {
		if (that.userName().trim() != '') {
			
			if ( that.topic().trim() == '' ) 
				that.topic('Test');
			
			that.chatContent('');
			that.message('');
			keepPolling = true;
			pollForMessages();
		}
	}
 
	function pollForMessages() {
		if (!keepPolling) {
			return;
		}
		var form = $("form");
		that.activePollingXhr($.ajax({url : getChatUrl(form), type : "GET", data : form.serialize(),
			success : function(messages) {
				console.log("messages : ", messages);
				for ( var i = 0; i < messages.length; i++) {
					that.chatContent(that.chatContent() + "[" + messages[i].user + "] " + messages[i].text+"<br />");
				}
			},
			error : function(xhr) {
				//keepPolling = false;
				//if (xhr.statusText != "abort") {
				//	console.error("Error getting chat messages: status=" + xhr.status + ", statusText=" + xhr.statusText);
				//}
			},
			complete : pollForMessages
		}));
	}
 
	function getChatUrl(form) {
		return form.attr("action") + "/" + that.topic() + "/" + that.userName();
	}
 
	that.postMessage = function() {
		if (that.message().trim() != '') {
			var form = $("form");
			$.ajax({url : getChatUrl(form), type : "POST", data : form.serialize(),
				error : function(xhr) {
					console.error("Error posting chat message: status=" + xhr.status + ", statusText=" + xhr.statusText);
				}
			});
			that.message('');
		};
	}
 
	that.leaveChat = function() {
		keepPolling = false;
		that.activePollingXhr().abort();
		that.activePollingXhr(null);
		var form = $("form");
		$.ajax({url : getChatUrl(form), type : 'DELETE',
			error : function(xhr) {
				console.error("Error while leaving chat: status=" + xhr.status + ", statusText=" + xhr.statusText);
			}
		});
		this.userName('');
	};
 
};

$(document).ready(function() {
	//Activate knockout.js
	ko.applyBindings(new ChatViewModel());
});
</script>
</body>
</html>
